<template>
  <div class="w-full h-full bg-[#041527] box-border">
    <div class="p-4">
      <div class="h-8 bg-[rgba(255,255,255,.3)]"></div>
    </div>
    <NuxtLink
        v-for="item in menus"
        :key="item.path"
        :to="item.path"
        class="block p-1 h-12"
    >
      <div
          :class="[
              'h-full pl-6 pr-4 flex items-center rounded-lg overflow-hidden',
              route.path === item.path ? 'bg-[#3875f6]' : ''
          ]"
      >
        <span class="text-[14px] text-[#FFF]">{{ item.title }}</span>
      </div>
    </NuxtLink>
  </div>
</template>
<script lang="ts" setup>
import { MENUS } from '@/config';

const menus = computed(() => MENUS);

const route = useRoute();
</script>

